<template>
  <div class="container">
    <div class="container-1">
      <!-- 面包屑导航 -->
      <div class="daohang">
        <template>
          <i class="el-icon-location"></i>
          <span>您的位置：</span>
        </template>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item><a href="/">首页</a></el-breadcrumb-item>
          <el-breadcrumb-item>游戏库</el-breadcrumb-item>
        </el-breadcrumb>
      </div>

      <!-- 左边 -->
      <div class="aa" style="width: 795px;" v-for="item2 in data" :key="item2.id">
        <!-- 1：图，按钮 -->
        <el-main class="left-1">
          <div class="l-1-1">
            <div>
              <img
                style="width: 180px; height: 180px"
                :src="item2.icon"
              />
            </div>
          </div>
          <!-- f -->
          <div class="l-1-2">
            <div class="l-1-a">
              <h1>{{item2.name}}</h1>
            </div>
            <div class="l-1-b">
              <div class="l-b-1">
                <span>文件大小：<i>{{item2.size}} MB</i></span>
                <span>VIP等级：<i>{{item2.grabe}}</i></span>
              </div>
              <div class="l-b-2">
                <span>游戏类型：<i>{{item2.type}}</i></span>
                <span>上线时间：<i>{{item2.time}}</i> </span>
              </div>
            </div>
            <el-row>
              <el-button type="primary">安卓版下载</el-button>
              <el-button type="success">IOS版下载</el-button>
            </el-row>
          </div>
        </el-main>

        <!-- 标签页 -->
        <!-- <el-tabs style="background:#fff;height:35px" v-model="activeName" type="card" @tab-click="handleClick" stretch> -->
        <el-tabs style="background: #fff; height: 35px" stretch>
          <el-tab-pane label="详情" name="first"></el-tab-pane>
          <el-tab-pane label="品论0" name="second"></el-tab-pane>
          <el-tab-pane label="攻略资讯" name="third"></el-tab-pane>
        </el-tabs>

        <!-- 2：简介 -->
        <el-main class="left-2">
          <div class="jianjie">
            <div>简介</div>
            <p>
              {{item2.content}}
            </p>
          </div>
          <div class="picture">
            <div class="demo-image__preview">
              <el-image
                style="width: 180px; height: 260px"
                :src="item2.pic1"
                :preview-src-list="srcList"
              >
              </el-image>
              <el-image
                style="width: 180px; height: 260px"
                :src="item2.pic2"
                :preview-src-list="srcList"
              >
              </el-image>
              <el-image
                style="width: 180px; height: 260px"
                :src="item2.pic3"
                :preview-src-list="srcList"
              >
              </el-image>
              <el-image
                style="width: 180px; height: 260px"
                :src="item2.pic4"
                :preview-src-list="srcList"
              >
              </el-image>
            </div>
          </div>
          <div class="tese">
            <div>游戏特色</div>
            <p>
              {{item2.explain}}
            </p>
          </div>
        </el-main>

        <!-- 3：玩家评论 -->
        <el-main class="left-3">
          <div>
            玩家评论
            <router-link class="a" to="/gamecenter">更多(0)</router-link>
          </div>
          <div>
            <router-link to="/gamecenter"
              >下载盒子，参与更多评论(0)</router-link
            >
          </div>
        </el-main>
      </div>

      <!-- 右边 -->
      <div class="bb">
        <el-main class="r-1">
          <!-- 开服 -->
          <div>
            开服表
            <router-link class="a" to="/newgame">更多</router-link>
          </div>
          <div class="warm-prompt">
            温馨提示：具体开服信息以游戏内开服为准！
          </div>
        </el-main>

        <!-- 礼包 -->
        <el-main class="r-2">
          <div>
            相关礼包
            <router-link class="a" to="/giftbag">更多</router-link>
          </div>
        </el-main>

        <!-- 咨询 -->
        <el-main class="r-3">
          <div>
            相关资讯
            <router-link class="a" to="/information">更多</router-link>
          </div>
        </el-main>

        <!-- 排行 -->
        <el-main class="r-4" >
          <div >热门排行榜</div>
          <ul v-for="item in detail" :key="item.id">
            <!-- <li :class="this.isShow ? 'item on' : 'item'" @mouseover="over" @mouseleave="leave"> -->
            <li @mouseover="over" @mouseleave="leave" >
              <i></i>
              <!-- <div class="a-1" v-if="this.isShow">{{item.name}}</div>
              <div class="a-2" v-else> -->
              <!-- <div class="a-1" >{{item.name}}</div> -->
              <div class="a-2">
                <router-link to="/hot" class="a-2-1">
                  <img style="width: 70px; height: 70px" :src="item.icon"/>
                </router-link>
                <div class="a-3">
                  <router-link to="/hot" class="a-3-1">
                    <div>{{item.name}}</div>
                  </router-link>
                  <div class="a-3-2"><span>{{item.score}}万人在玩</span>|<span>{{item.size}} MB</span></div>
                  <div class="a-3-3"> {{item.explain}}</div>
                </div>
              </div>
              <router-link class="aa" to="/hot">下载游戏</router-link>
            </li>
          </ul>
        </el-main>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  data() {
    return {
      detail: [],
      url: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_bt%2F0%2F13404532190%2F1000.jpg&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1670929718&t=8165de2c4c7781c6c694dd60b3263830",
      srcList: [
        "http://app003.bacms.cn/upload/gmimg/2020_01_05_17_47_48_0.png",
        "	http://app003.bacms.cn/upload/gmimg/2020_01_05_17_47_47_0.png",
        "http://app003.bacms.cn/upload/gmimg/2020_01_05_17_47_44_0.png",
        "http://app003.bacms.cn/upload/gmimg/2020_01_05_17_47_45_0.png"
      ],
      isShow:true,  

      data:{},
    };
  },

  methods: {
    getGame_be() {
      const url = "http://127.0.0.1:3100/game_pic";
      axios.get(url).then((res) => {
        console.log(res);
        this.detail = res.data.data;
      });
    },
    over(){
      this.isShow=false
    },
    leave(){
      this.isShow=true
    },
    getGame_detail() {
      let id=this.$route.query.id
      const url = `http://127.0.0.1:3100/game1?id=${id}`;
      axios.get(url).then((res) => {
        console.log('detail',res);
        this.data= res.data.data;
      });
    }
  },

  mounted() {
    this.getGame_be()

    this.getGame_detail()

  },
};
</script>

<style>
@import "../assets/reset1.css";
</style>

<style lang="scss" scoped>
.el-main {
  background-color: #fff;
  // margin-right: 200px;
}
.container {
  background: #e9eef3 !important;
  /* width: 1200px; */
}
.container-1 {
  /* display: flex; */
  // margin: 0 200px;
  width: 1200px;
  height: 1100px;
  /* background: #fff; */
  .daohang {
    display: flex;
    height: 40px;
    line-height: 40px;
    padding-left: 30px;
    > i {
      line-height: 40px;
      width: 20px;
    }
    .el-breadcrumb {
      line-height: 40px;
    }
  }
  .aa {
    width: 795px;
    margin-right: 15px;
    float: left;
    background: #e9eef3;
    .left-1 {
      /* position: relative; */
      /* height: 208px; */
      .l-1-1 {
        /* padding: 30px 30px 10px; */
        /* overflow: hidden; */
        /* float: left; */

        > div {
          float: left;
          width: 180px;
          height: 180px;
          > img {
            border-radius: 30%;
          }
        }
      }
      .l-1-2 {
        width: 535px;
        height: 179px;
        margin-left: 20px;
        padding-top: 10px;
        float: left;

        .l-1-a {
          width: 100%;
          display: block;
          /* float: left; */
          > h1 {
            font-size: 36px;
            font-weight: 400;
            display: inline-block;
            line-height: 36px;
          }
        }
        .l-1-b {
          .l-b-1 {
            margin-top: 13px;
            /* font-size: 0; */
            > span {
              display: inline-block;
              width: 50%;
              font-size: 12px;
              > i {
                color: #999;
              }
            }
          }
          .l-b-2 {
            margin-top: 13px;
            /* font-size: 0; */
            > span {
              display: inline-block;
              width: 50%;
              font-size: 12px;
              > i {
                color: #999;
              }
            }
          }
        }
        .el-row {
          margin-top: 26px;
        }
      }
    }

    .left-2 {
      margin-top: 10px;
      height: 600px;
      .jianjie {
        position: relative;
        padding: 15px 30px;
        border-bottom: 1px solid #eee;
        > div {
          margin-bottom: 10px;
          padding: 0 0 0 8px;
          line-height: 20px;
          font-size: 18px;
          border-left: 4px solid #14b9c8;
        }
        > p {
          line-height: 24px;
          font-size: 14px;
          font-weight: 400;
          color: #333;
          cursor: pointer;
        }
      }
      .picture {
        padding: 15px 17px;
      }
      .tese {
        padding: 15px 30px;
        border-bottom: 1px solid #eee;
        > div {
          margin-bottom: 10px;
          padding: 0 0 0 8px;
          line-height: 20px;
          font-size: 18px;
          border-left: 4px solid #14b9c8;
        }
        > p {
          line-height: 24px;
          font-size: 14px;
          font-weight: 400;
        }
      }
    }
    .left-3 {
      margin-top: 20px;
      > :first-child {
        padding: 15px 30px 5px;
        margin-bottom: 10px;
        padding: 0 0 0 8px;
        line-height: 20px;
        font-size: 18px;
        border-left: 4px solid #14b9c8;
        .a {
          color: #14b9c8;
          float: right;
          font-size: 12px;
        }
      }
      > :last-child {
        width: 100%;
        height: 60px;
        line-height: 60px;
        text-align: center;
        background: #fafafa;
        color: #999;
        font-size: 16px;
      }
    }
  }
  .bb {
    float: left;
    width: 390px;
    .a {
      float: right;
      font-size: 12px;
      color: #14b9c8;
    }
    .r-1 {
      margin-bottom: 20px;
      > :first-child {
        padding: 10px 10px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        padding: 0 0 0 8px;
        line-height: 20px;
        font-size: 18px;
        border-left: 4px solid #14b9c8;
      }
      > :last-child {
        padding: 5px 10px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
        color: red;
      }
    }
    .r-2 {
      margin-bottom: 20px;
      > :first-child {
        padding: 10px 10px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        padding: 0 0 0 8px;
        line-height: 20px;
        font-size: 18px;
        border-left: 4px solid #14b9c8;
      }
    }
    .r-3 {
      margin-bottom: 20px;
      // height: 110px;
      > :first-child {
        padding: 10px 10px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        padding: 0 0 0 8px;
        line-height: 20px;
        font-size: 18px;
        border-left: 4px solid #14b9c8;
        
      }
    }
    .r-4 {
      margin-bottom: 20px;
      height: 720px;
      > div {
        padding: 10px 10px 0;
        border-bottom: 1px solid #eee;
        margin-bottom: 10px;
        padding: 0 0 0 8px;
        line-height: 20px;
        font-size: 18px;
        border-left: 4px solid #14b9c8;
      }
      > ul {
        margin: 10px;
        > li {
          position: relative;
          padding: 10px 0;
          border-bottom: 1px solid #eee;
          background-position: 0 0;
          > i {
            position: absolute;
            top: 10px;
            left: 0;
            display: block;
            width: 20px;
            height: 50px;
            background-repeat: no-repeat;
            background-image: url(@/assets/rank.png);
          }
          .a-1{
            display: block;
            // height: 624px;
            line-height: 50px;
            color: #666;
            font-size: 14px;
            padding-left: 25px;
          }
          .a-2 {
            display: block;
            // position: relative;
            // min-height: 70px;
            // height: 624px;
            .a-2-1{
              position: absolute;
              left: 30px;
              top: 0;
              display: inline-block;
              width: 70px;
              height: 70px;
              border-radius: 5px;
              overflow: hidden;
            }
            .a-3{
              padding-left: 110px;
              .a-3-1{
                color: #333;
                text-decoration: none;
                cursor: pointer;
                .div{
                  font-size: 16px;
                }
              }
              .a-3-2{
                margin-top: 7px;
                color: #999999; 
                :first-child{
                  margin-right: 3px;
                }
                :last-child{
                  margin-left: 3px;
                }
              }
              .a-3-3{
                margin-top: 7px;
                color: #999999;
                line-height: 16px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
              }
            }
          }
          .aa {
            position: absolute;
            right: 0;
            top: 22px;
            width: 70px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            border: 1px solid #14b9c8;
            border-radius: 20px;
            color: #14b9c8;
            background: #fff;
          }
        }
      }
    }
  }
}
</style>